<template>
    <layout title="核酸上门采样服务-拼团进度">
        <div class='wrapper'>
            <van-cell-group class="info">
                <van-cell title="拼团号：" :value="this.collageId"></van-cell>
                <van-cell title="发起人：" :value="this.linkMan"></van-cell>
                <van-cell title="手机号：" :value="this.linkPhone"></van-cell>
                <van-cell title="单价：" :value="this.itemPrice+'元'"></van-cell>
                <van-cell title="成员人数：" :value="this.userMin+'人'"></van-cell>
                <van-cell title="采样时间：" :value="this.applyTime"></van-cell>
                <van-cell title="采样地址：" :value="this.address"></van-cell>
                <van-cell title="截至时间：" :value="this.endTime"></van-cell>
            </van-cell-group>
           
            <div class="qrcode-container">
                <div class="title">拼团二维码</div>
                <div class="qrcode-wrapper">
                    <div ref="qrcode"></div>
                </div>
                <div class="tip">请截图保存后，扫描二维码 参与拼团！</div>
            </div>
        </div>
    </layout>
    
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import groupInvitationApi from '@/api/groupInvitation'
import QRcode from "qrcodejs2"
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data  () {
// 这里存放数据
    return {
        id:"",
        address:"",
        collageId:"",
        applyTime:"",
        endTime:"",
        linkMan:"",
        linkPhone:"",
        itemPrice:"",
        userMin:"",
    }
  },
// 监听属性 类似于data概念
  computed: {},
// 监控data中的数据变化
  watch: {},
// 方法集合
  methods: {
    init(){
        if(this.$route.query.id){
            this.id = this.$route.query.id
            this.getCollagePayerInfo()
        }else{
            this.$dialog.alert({
                title:"提示",
                message:"请退出页面，重新进入，否者此次申请无效!"
            }).then(res=>{
                window.close();
                WeixinJSBridge.call('closeWindow');
            })
        }
        
    },
    // 获取信息
    getCollagePayerInfo(){
        let params = {
            id:this.id||false
        }
        groupInvitationApi.collagePayerInfo(params)
            .then(res=>{
                if(res.status==0){
                    if(res.data){
                        this.address = res.data.address
                        this.collageId = res.data.collageId
                        this.applyTime = res.data.applyTime
                        this.linkMan = res.data.linkMan
                        this.linkPhone = res.data.linkPhone
                        this.itemPrice = res.data.itemPrice
                        this.userMin = res.data.userMin
                        this.endTime = res.data.endTime
                        this.createQrcde()
                    }else{
                        this.$toast({
                            type:"fail",
                            message:"页面加载失败请重试"
                        })
                    }
                }else{
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                }
                
            })
    },
     // 生成二维码函数
    createQrcde() {
        var defaultContent = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicPage%2FnucleicGroup%2Fgroup_join.html&response_type=code&scope=snsapi_base&state="+this.collageId;
        new QRcode(this.$refs.qrcode, {
            text: defaultContent,
            width: 220,
            height: 220,
            correctLevel: 3
        })
    },
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created  () {

  },
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted  () {
    this.init()
  },
  beforeCreate  () {}, // 生命周期 - 创建之前
  beforeMount  () {}, // 生命周期 - 挂载之前
  beforeUpdate  () {}, // 生命周期 - 更新之前
  updated  () {}, // 生命周期 - 更新之后
  beforeDestroy  () {}, // 生命周期 - 销毁之前
  destroyed  () {}, // 生命周期 - 销毁完成
  activated  () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 93%;
        margin: auto;
        
        .info{
            box-sizing: border-box;
            overflow: hidden;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 12px rgba(0,0,0,10%);
        }
        .qrcode-container {
        background-color: white;
        margin: 10px 0;
        border-radius: 10px;
        padding: 10px 0;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 10%);
        .title{
                text-align: center;
                font-size: 20px;
                padding: 10px 0;
                font-weight: 700;
            }
        .qrcode-wrapper {
            width: 220px;
            margin: 0 auto;
            .qrcode{
                width: 220px;
            }   
            &::v-deep {
                img {
                    width: 100%;
                }
            }
        }

        .tip {
            font-size: 18px;
            margin-top: 10px;
            color: red;
        }
    }
    }
</style>